import React, { Component } from 'react'

import { ButtonStyled } from './StyledButton'

class UIButton extends Component {

  render() {

    return (

      <ButtonStyled {...this.props}>
        <div className="btnMain" // 先调用组件内部点击方法
          // onClick={() => this.onHandleBtn(this.props)}
          // onClick={this.onHandleBtn}

          // 直接调用外部传入方法
          onClick={() => (this.props.clickButton ? this.props.clickButton(this.props.tag ? this.props.tag : '') : console.log('click'))}
        >

          <>
            {
              (this.props.img || this.props.selectedImg) ? <img className="btnImg" src={this.props.selected ? (this.props.selectedImg ? this.props.selectedImg : this.props.img) : this.props.img} alt="" /> : ''

            }
          </>

          <>{
            (this.props.num || this.props.selectedNum) 
            ? <p className="btnNum">{this.props.selected 
              ? (this.props.selectedNum 
                ? this.props.selectedNum 
                : this.props.num)
                : this.props.num}</p> 
                : ''
          }</>

          <>{

            (this.props.title || this.props.selectedTitle) 
            ? <p className="btnTitle">{this.props.selected 
              ? (this.props.selectedTitle 
                ? this.props.selectedTitle 
                : this.props.title) 
                : this.props.title}</p> 
                : ''
          }</>

          {this.props.children}
        </div>
      </ButtonStyled>

    )
  }
  onHandleBtn = (props) => {
    console.log(26, props)
    // 可进行组件内部处理按钮状态

    // 调用传入点击事件
    if (this.props.clickButton) {
      this.props.clickButton(props.tag ? props.tag : '')

    } else {
      console.log("click11")
    }
    // this.props.history.push('/list', { id })
    // this.props.selected = !this.props.selected;
  }

}

export default UIButton